<#assign module="marketing"/>

<@override name="header">

    <style>
        #addCouponIcon {
            cursor: pointer;
        }
    </style>
</@override>
<@override name="body">
    <div class="row">
        <div class="col-xs-12"></div>
    </div>
    <div class="row margin-top" id="app">
        <div class="col-xs-12">
            <div class="table-responsive">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        ${couponRule.title}&nbsp;&nbsp;有效期：${couponRule.start?string('yyyy/MM/dd')}
                        &nbsp;-&nbsp;<#if couponRule.end??>${couponRule.end?string('yyyy/MM/dd')}<#else>不限</#if>
                        &nbsp;&nbsp;
                        <#if couponRule.timeStatus==0>
                            （未开始）
                        <#elseif couponRule.timeStatus==1>
                            （使用中）
                        <#elseif couponRule.timeStatus==2>
                            （已过期）
                        </#if>


                    </div>
                </div>

                <div class="panel panel-default margin-top">
                    <div class="panel-heading">
                        生成优惠劵
                    </div>
                    <div class="panel-body">
                        <form id="submit_form" action="${ctx}/couponrule/mass" class="form-horizontal" method="post">
                            <input type="hidden" name="param" v-model="param">
                            <input id="hiddenInput" type="hidden" name="couponRuleId" value="${couponRule.id}">
                            <#if couponRule.money??><input id="couponRuleMoney" type="hidden" name="" value="${couponRule.money}"></#if>
                            <#if couponRule.discount??><input id="couponRuleDiscount" type="hidden" value="${couponRule.discount}"></#if>
                            <#--                            <div class="form-group">-->
                            <#--                                <div class="col-sm-5" style="text-align:right">-->
                            <#--                                    <i-button id="addCouponIcon" shape="circle" icon="md-add"-->
                            <#--                                              @click="addMore"></i-button>-->
                            <#--                                </div>-->
                            <#--                            </div>-->
                            <div class="form-group" style="margin-left:10px; ">
                                <label class="col-sm-3 control-label"></label>
                                <#--                                <input id="submit_button" type="button" class="btn btn-primary" value="生成">-->
                                <i-button type="primary" @click="insertCoupon">生成</i-button>
                                <input type="button" class="btn btn-default"
                                       onclick="window.location.href = '${ctx}/couponrule/list';" value="返回">
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

</@override>
<@override name="footer">
    <script type="text/javascript">
        var ctx = window.daijia.ctx;
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    lines: [],
                    lineModel: {},
                    amountModel: {},
                    priceModel: {},
                    lineNameModel:{},
                    discountModel:{},
                    couponCount: null,
                    param: '',
                    couponRuleMoney:0,
                    couponRuleDiscount:0.0,
                    isPrice: true,
                    isDiscount: true,
                    isNumber: true,
                };
            },
            created: function () {
                var vm = this;
                vm.couponRuleMoney = $("#couponRuleMoney").val();
                vm.couponRuleDiscount = $("#couponRuleDiscount").val();
                $.ajax({
                    url: ctx + "/zhuanxian/findLines",
                    type: "get",
                    async: false,
                    success: function (res) {
                        if (null != res) {
                            vm.lines = res.lineList;
                            // vm.lineModel = res.lineModel;
                            var dom = "";
                            $.each(vm.lines, function (index, item) {
                                var lineId = item.id;
                                var lineName = item.name;
                                vm.lineModel["line"+lineId]="";
                                vm.amountModel["amount" + lineId] = 0;
                                vm.priceModel["price"+lineId]=vm.couponRuleMoney;
                                vm.lineNameModel["name"+lineId] = lineName;
                                vm.discountModel["discount"+lineId] = vm.couponRuleDiscount;
                                dom +=
                                    "<div class='form-group' id='group" + lineId + "' >" +
                                    "   <label class='col-sm-3 control-label'><em>*</em>线路："+lineName+"</label>" +
                                    // "   <div class='col-sm-2'>" +
                                    // "       <i-select v-model='lineModel.line" + index + "' filterable size='large' style='width:200px'>" +
                                    // "           <i-option v-for='item in lines' :value='item.value' :key='item.value'>{{ item.label }}</i-option>" +
                                    // "       </i-select>" +
                                    // "   </div>" +
                                    "   <label class='col-sm-1 control-label'><em>*</em>数量：</label>" +
                                    "   <div class='col-sm-2'>" +
                                    "       <i-input v-model='amountModel.amount" + lineId + "' id='amount" + lineId + "' @on-blur='checkNumber(amountModel.amount" + lineId + ")' required placeholder='输入需生成优惠劵的数量'/>" +
                                    // "       <span class='help-block'>一次性最多生成300张优惠劵。</span>" +
                                    "   </div>" +
                                    "   <label class='col-sm-1 control-label'><em>*</em><#if couponRule.type==1>金额：<#else>折扣：</#if></label>" +
                                    "   <div class='col-sm-2'>" +
                                    "       <#if couponRule.type==1>"+
                                    "           <i-input v-model='priceModel.price"+lineId+"' id='price" + lineId + "' @on-blur='checkPrice(priceModel.price"+lineId+")' required placeholder='输入需生成优惠劵的金额'/>"+
                                    "       <#else>" +
                                    "           <i-input v-model='discountModel.discount"+lineId+"' id='discount" + lineId + "' required placeholder='输入0到10的数字' /> " +
                                    "       </#if>" +
                                    "   </div>" +
                                    "</div>"
                            })
                            $("#hiddenInput").after(dom);
                        }
                    }
                })
            },
            methods: {
                checkPrice(price){
                    var vm = this;
                    console.log("price:"+price);
                    var reg = /^[1-9]\d*$/;
                    console.log(reg.test(price));
                    if(reg.test(price)){
                        vm.isNumber = true;
                    } else {
                        vm.isNumber = false;
                        $.scojs_message('请输入有效金额！', $.scojs_message.TYPE_ERROR);
                    }

                },
                checkNumber(amount) {
                    var vm = this;
                    console.log("amount:"+amount);
                    var reg = /^([1-9]\\d*(\\.[0-9]*[1-9])?)|(0\\.[0-9]*[1-9])|0$/;
                    console.log(reg.test(amount));
                    if(reg.test(amount)){
                        vm.isNumber = true;
                    } else {
                        vm.isNumber = false;
                        $.scojs_message('请输入有效数量！', $.scojs_message.TYPE_ERROR);
                    }
                },
                insertCoupon() {
                    var vm = this;
                    var arr = new Array();
                    var couponNumber = 0;
                    if(vm.isPrice && vm.isDiscount && vm.isNumber){
                        $.each(vm.lines,function(i,item){
                            var lineId = item.id;
                            var json = {lineId:lineId,lineName:vm.lineNameModel["name"+lineId],couponNumber:vm.amountModel["amount"+lineId],
                                couponPrice:vm.priceModel["price"+lineId],discount:vm.discountModel["discount"+lineId]};
                            arr[i] = json;
                            couponNumber += parseInt(vm.amountModel["amount"+lineId]);
                        })
                        var param = {};
                        param["param"] = arr;
                        vm.param = JSON.stringify(param);
                        var confirm = $.scojs_confirm({
                            content: "确认要生成"+couponNumber+"张优惠劵吗？",
                            action: function () {
                                $("#submit_button").val("生成中...");
                                $("#submit_button").attr("disabled", true);
                                $("#submit_form").submit();
                            }
                        });
                        confirm.show();
                    } else {
                        $.scojs_message('请输入有效数字！', $.scojs_message.TYPE_ERROR);
                    }

                }
            }
        })

    </script>
</@override>
<@extends name="../layout.ftl"/>